<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
</body>
</html>

<script type="module">
import X, { sum } from './utililty.js';

console.log(X, sum(1, 2, 3, 4, 5, 6, 7, 8, 9));


// 英文：
  // scope - 范围（命名冲突 这类）

/* 面试问题： 请说一说 什么叫模块化？
  1. 首先 模块化，是一种重要的设计模式
  2. 它的作用：避免 变量命名冲突 - scope
  3. ES6 提出了 模块化方案：ESM  ->  ES Module
*/

// 
/* ES Module 的技术点：
  模块化两块：
    导出 export  （必须在 js 文件）
      1- export { 变量名 }
      2- export 变量声明语句   （2 为 1 的另外一种书写方式）
      3- 导出默认值：  export default 变量名   （只能有一个  <= 1）

    导入 import
      1- import {变量名} from 'filePath';   本质 导入 export 相关
      2- import xx from 'filePath';  本质导入 export default 相关
      3- import xx, {变量名} from 'filePath';  本质 export 导入 +  默认值导入 合二为一
      4- import * as xx from 'filePath';

  // 高层思想：
    import 关键字 必须 放到 文件头部。
    原因：import 本质是 ”预加载“，必须放到 头部；即在 其他代码运行前，先 import 进来相关 变量
      缺点：因为“预加载”，若 import 太多，会导致 “假死/白屏”；
        Q：如何解决这种 预加载导致的 假死问题？
          - 懒加载；ES7/8/9  提出了 import 函数，
            -> import('filePath', data => {
                // data 表示 通过 异步 拿到了 filePath export 的数据
              });
*/

</script>